<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <script src="static/js/apply.js"></script>
    <style>
        .required {
            color: red;
            margin: 0 5px;
        }
    </style>
</head>
<body style="background-color: #eee;padding: 15px">
<div class="layui-card">
    <div class="layui-card-body">
            <span class="layui-breadcrumb">
                <a href="javascript:;">申请管理</a>
                <a><cite>申请用车</cite></a>
            </span>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" id="dataForm" lay-filter="dataForm">
            <div class="layui-form-item">
                <label for="timeRange" class="layui-form-label"><span class="required">*</span>申请时间</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="timeRange" id="timeRange" autocomplete="off"
                           readonly
                           placeholder="请选择用车时间范围"
                           lay-verify="required" lay-reqtext="请选择用车时间范围">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="applyReason" class="layui-form-label"><span class="required">*</span>用车事由</label>
                <div class="layui-input-block">
                    <textarea name="applyReason" id="applyReason" class="layui-textarea" cols="30" rows="6"
                              placeholder="请输入用车原因" lay-verify="required"
                              lay-reqtext="用车原因不能为空"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="applyCarId" class="layui-form-label">
                    <span class="required">*</span>申请车辆
                </label>
                <div class="layui-input-block">
                    <select name="applyCarId" id="applyCarId">
                        <option value="">[系统指派]</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="applyType" class="layui-form-label">
                    <span class="required">*</span>是否自驾
                </label>
                <div class="layui-input-block">
                    <select lay-filter="applyType" name="applyType" id="applyType">
                        <option value="1">自驾</option>
                        <option value="2">代驾</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" id="applyDriverIdDiv">
                <label for="applyDriverId" class="layui-form-label">
                    <span class="required">*</span>申请司机
                </label>
                <div class="layui-input-block">
                    <select name="applyDriverId" id="applyDriverId">
                        <option value="">[系统指派]</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <button class="layui-btn" type="submit" lay-filter="submit" lay-submit>提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    let form;
    layui.use(function () {
        form = layui.form;
        const laydate = layui.laydate;

        getCarSelect();
        getDriverSelect();

        /*动态设置申请司机的显示与否*/
        const applyType = $("#applyType").val();
        if (applyType === "1") {
            $("#applyDriverIdDiv").hide();
        } else {
            $("#applyDriverIdDiv").show();
        }
        /*监听是否自驾下拉框的选择*/
        form.on("select(applyType)", function ({value}) {
            if (value === "1") {
                $("#applyDriverIdDiv").hide();
            } else {
                $("#applyDriverIdDiv").show();
            }
        })

        /*渲染日期控件*/
        laydate.render({
            elem: "#timeRange",
            range: true,
            rangeLinked: true,
            type: "datetime",
            min: getMinTime()
        });

        /*自定义验证*/
        // form.verify({
        //     carNo(value) {
        //         if (value.test(/^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z][a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z][A-Z][A-Z0-9]{4}[A-Z0-9挂学警港澳])$/)) {
        //             return "请输入正确的车牌！";
        //         }
        //     }
        // });

        /*监听表单提交事件*/
        form.on("submit(submit)", function ({field}) {
            const trs = field.timeRange.split(" - ");
            const applyStartTime = trs[0];
            const applyEndTime = trs[1];

            $.ajax({
                url: "apply/apply",
                method: "post",
                data: {
                    ...field,
                    applyStartTime, applyEndTime
                },
                dataType: "json",
                success(res) {
                    if (res.code === 200) {
                        layer.msg('申请成功，等待审核！', {icon: 6}, function () {
                            location.reload()
                        });
                    } else {
                        layer.alert(res.msg, {icon: 5});
                    }
                }
            });
            return false;
        });

    });

    function getMinTime() {
        /*计算申请时间可选值的最小值，要求最早可申请时间为当前时间的3小时后*/
        let date = new Date();
        date.setHours(date.getHours() + 3);
        let y = date.getFullYear();
        let M = date.getMonth() + 1;
        let d = date.getDate();

        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();

        return y + '-' + (M < 10 ? '0' + M : M) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
    }
</script>
</html>
